<template>
    <div>
        <h1>我的店铺</h1>
        <div style="
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        ">
            <div class="item1" style="background: linear-gradient(to right, #e03f82, #c9478e)">
                <p style="font-size: 1rem; font-weight: bold">订单总量</p>

                <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 0.8rem;
              padding-right: 2rem;
              box-sizing: border-box;
            ">
                    <p>
                        <el-icon style="color: white" size="1.5rem">
                            <Histogram />
                        </el-icon>
                    </p>
                    <van-rolling-text :start-num="0" :target-num="myListLength" stop-order="rtl"
                        style="font-size: 1.5rem; font-weight: bold; color: white" />
                </div>
            </div>
            <div class="item2" style="background: linear-gradient(to right, #6e4cbc, #5c45b1)">
                <p style="font-size: 1rem; font-weight: bold">未完成订单</p>

                <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 1.3rem;
              padding-right: 2rem;
              box-sizing: border-box;
            ">
                    <el-icon style="color: white" size="1.5rem">
                        <Document />
                    </el-icon>
                    <van-rolling-text :start-num="0" :target-num="unCompleteOrder" stop-order="rtl"
                        style="font-size: 1.5rem; font-weight: bold; color: white" />
                </div>
            </div>
            <div class="item3" style="background: linear-gradient(to right, #e03f82, #c9478e)">
                <p style="font-size: 1rem; font-weight: bold">成交金额</p>

                <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 1.3rem;
              padding-right: 2rem;
              box-sizing: border-box;
            ">
                    <p style="color: white;">￥</p>
                    <van-rolling-text :start-num="0" :target-num="allPrice" stop-order="rtl"
                        style="font-size: 1.5rem; font-weight: bold; color: white" />
                </div>
            </div>
            <div class="item4" style="background: linear-gradient(to right, #6e4cbc, #5c45b1)">
                <p style="font-size: 1rem; font-weight: bold">取消订单</p>

                <div style="
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding-top: 1.3rem;
              padding-right: 2rem;
              box-sizing: border-box;
            ">
                    <el-icon style="color: white" size="1.5rem">
                        <Document />
                    </el-icon>
                    <van-rolling-text :start-num="0" :target-num="canceledOrder" stop-order="rtl"
                        style="font-size: 1.5rem; font-weight: bold; color: white" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { get } from "@/util/request";
import { computed, onMounted, ref } from "vue";
import { useCounterStore } from "@/stores/counter";
import {
    Histogram,
    FolderOpened,
    CircleCheckFilled,
    Document,
} from "@element-plus/icons-vue";
const store = useCounterStore()
let myDian = ref({})
const getlist = async () => {
    let { data: { code, data } } = await get('/shopfront/getsalon')
    if (code == 200) {
        data.forEach(i => {
            if (i._id == store.info.salonId) {
                myDian.value = i
            }
        });
    }
}
let myOrderList = ref([])
let myListLength = ref()
let completeOrder = ref(0)
let allPrice = ref(0)
let unCompleteOrder = ref(0)
let canceledOrder = ref(0)
const getMyOrderList = async () => {
    let { data: { code, data } } = await get('/shopfront/getorder')
    if (code == 200) {
        myOrderList.value = []
        data.forEach(i => {
            if (i.salonId._id == store.info.salonId) {
                myOrderList.value.push(i)
            }
            if (i.status == 0) {
                completeOrder.value++
                allPrice.value += i.amout
            } else if (i.status == 1) {
                unCompleteOrder.value++
            } else if (i.status == 2) {
                canceledOrder.value++
            }
        })
        myListLength.value = myOrderList.value.length
    }
}

onMounted(() => {
    getlist();
    getMyOrderList()
});
</script>

<style scoped>
.item1,
.item2,
.item3,
.item4 {
    width: 20%;
    height: 8rem;
    margin-top: 0.5rem;
    border-radius: 0.7rem;
    padding-left: 1.5rem;
    box-sizing: border-box;
    color: white;
}
</style>